<template>
  <ContentWrap>
    <el-descriptions :column="1" border>
      <el-descriptions-item label="申请人" width="100">
        {{ detailData.applicant }}
      </el-descriptions-item>
      <el-descriptions-item label="申请时间">
        {{ detailData.appTime }}
      </el-descriptions-item>
      <el-descriptions-item label="下载目的">
        {{ detailData.objective }}
      </el-descriptions-item>
      <el-descriptions-item label="下载用途">
        {{ detailData.useTo }}
      </el-descriptions-item>
      <el-descriptions-item label="水印" v-if="detailData.waterType == 0">
        {{ detailData.watermark }}
      </el-descriptions-item>
      <el-descriptions-item label="水印" v-if="detailData.waterType == 1">
        <el-image :src="detailData.watermark" />
      </el-descriptions-item>
      <el-descriptions-item label="备注">
        {{ detailData.remark }}
      </el-descriptions-item>
      <el-descriptions-item label="下载数据">
        <el-table v-if="detailData.type == 0" :data="detailData.data" stripe style="width: 100%">
          <el-table-column label="ID" prop="id" align="center" />
          <el-table-column label="名称" prop="name" align="center" />
          <el-table-column label="格式" prop="ext" align="center" />
          <el-table-column label="大小" prop="size" align="center" />
          <el-table-column align="center" label="操作">
            <template #default="scope">
              <el-link type="primary" @click="preview(scope.row.previewUrl)">预览</el-link>
            </template>
          </el-table-column>
        </el-table>
        <el-table v-if="detailData.type == 1" :data="detailData.data" stripe style="width: 100%">
          <el-table-column label="ID" prop="id" align="center" />
          <el-table-column label="图片" prop="url" align="center">
            <template #default="scope">
              <el-image :src="scope.row.url" style="max-width: 50px">
                <template #error>
                  <div class="image-slot">
                    <el-icon>
                      <icon-picture />
                    </el-icon>
                  </div>
                </template>
              </el-image>
            </template>
          </el-table-column>
          <el-table-column label="名称" prop="name" align="center" />
          <el-table-column label="格式" prop="format" align="center" />
          <el-table-column label="大小" prop="fileSize" align="center" />
        </el-table>
        <el-table v-if="detailData.type == 10" :data="detailData.data" stripe style="width: 100%">
          <el-table-column v-for="(column, index) in detailData.columns" :key="index" :prop="column.prop"
            :label="column.label" align="center">
            <template #default="scope">
              <el-image v-if="imaged(scope.row[column.prop])" :src="buildImage(column.prop, scope.row)"
                style="max-width: 50px">
                <template #error>
                  <div class="image-slot">
                    <el-icon>
                      <icon-picture />
                    </el-icon>
                  </div>
                </template>
              </el-image>
            </template>
          </el-table-column>
        </el-table>
      </el-descriptions-item>
    </el-descriptions>
  </ContentWrap>
</template>

<script lang="ts" setup>
import { propTypes } from '@/utils/propTypes'
import * as downApi from '@/api/down'
import * as previewApi from '@/api/preview'
import { Base64 } from 'js-base64'

defineOptions({ name: 'DownloadApplicationDetail' })
const { query } = useRoute() // 查询参数
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  }
]
const props = defineProps({
  id: propTypes.number.def(undefined)
})
const detailLoading = ref(false) // 表单的加载中
const detailData = ref<any>({}) // 详情数据
const queryId = query.id as unknown as number // 从 URL 传递过来的 id 编号
/** 获得数据 */
const getInfo = async () => {
  detailData.value = await downApi.detail(queryId)
}

function isValidJson(str) {
  try {
    JSON.parse(str)
    console.log(str)
    return true
  } catch (e) {
    return false
  }
}

function isNumber(str: string): boolean {
  return /^\d+$/.test(str) // 只包含数字的正则表达式
}

const imaged = (row) => {
  if (isNumber(row)) {
    return false
  }
  return isValidJson(row)
}
const buildImage = (name, row) => {
  if (row[name] && row[name] != 'null') {
    return JSON.parse(row[name].replaceAll('\\', ''))[0].url
  } else {
    return ''
  }
}
const asdf = (url) => {
  downApi.preview(Base64.encode(url))
}
/** 初始化 **/
onMounted(() => {
  getInfo()
})
</script>

<style scoped></style>
